<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jQuery Study</title>
<link href='http://fonts.googleapis.com/css?family=Economica' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>
	$(document).ready(function(){
		//var tableRow = $("<tr><td>Test</td><td>He like xxx</td><td>2011</td></tr>");
		//$("#demo-table tbody").html(tableRow);	
		
		//$("#demo").text("Tim Yao");
		//$("td").replaceWith('<th>Replace</th>');
		$('#offset').html( 'Offset:' + $('#demo-table').offset().top); 
		$('#position').html( 'Position:' + $('#demo-table').position().top); 		
	});
</script>


</head>

<body>
<h1 style="font-family:Economica">HELLO, I LOVE JQUERY!</h1>
<ul>
	<li id="offset">
    </li>
	<li id="position">
    </li>    
</ul>
<div style="position: relative; padding-top:100px;">
<div style="margin-top:50px; height:50px"></div>
<table id="demo-table" style="margin-top:100px;">
<thead>
	<tr>
        <th>Name</th>
        <th>Description</th>
        <th>Year</th>
    </tr>
</thead>
<tbody>
	<tr class="demo">
		<td>Jack</td>
        <td>He like xxx</td>
        <td>2001</td>
    </tr>
    <tr class="demo">
		<td>Peter</td>
        <td>He like xxx</td>
        <td>2002</td>
    </tr>
    <tr class="demo">
		<td>May</td>
        <td>He like xxx</td>
        <td>2011</td>
    </tr>
    <tr>
		<td id="demo">Rose</td>
        <td>He like xxx</td>
        <td>1871</td>
    </tr>
</tbody>


</table>
</div>

</body>
</html>
